<template>
  <ContentWrap>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">基础信息</div>
      </div>
      <div class="content_main">
        <el-form 
          ref="formRef" 
          :inline="true" 
          :model="formData.data" 
          :rules="formRules" 
          class="-mb-15px"
          label-width="auto"
        >
          <el-row :gutter="16">
            <el-col :span="6">
              <el-form-item label="设备编号" prop="devNo">
                <el-input v-model="formData.data.devNo" placeholder="请输入设备编号" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备名称" prop="devName">
                  <el-input v-model="formData.data.devName" placeholder="请输入设备名称" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备型号" prop="devModel">
                  <el-input v-model="formData.data.devModel" placeholder="请输入设备型号" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属厂家" prop="factoryName">
                  <el-input v-model="formData.data.factoryName" placeholder="请输入所属厂家" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="设备图片" prop="devPhotos">
                <UploadImgs
                  v-model="formData.data.devPhotos"
                  :limit="4"
                  :fileSize="20"
                  :fileType="['image/jpeg', 'image/png']"
                  height="130px"
                  width="200px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="事故附件" prop="attachment">
                <div class="upload_box" style="width: 100%;">
                  <UploadFile
                    v-model="formData.data.attachment"
                    class="upload-demo"
                    :fileSize="20"
                    :fileType="['jpg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt']"
                    :limit="4"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">状态信息</div>
      </div>
      <div class="content_main">
        <el-form 
          ref="formRef" 
          :inline="true" 
          :model="formData.data" 
          :rules="formRules" 
          class="-mb-15px"
          label-width="auto"
        >
          <el-row :gutter="16">
            <el-col :span="6">
              <el-form-item label="运行状态" prop="runId">
                <el-select v-model="formData.data.runId" filterable clearable placeholder="请选择运行状态">
                  <el-option v-for="item in runList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="运营状态" prop="operateId">
                <el-select v-model="formData.data.operateId" filterable clearable placeholder="请选择运营状态">
                  <el-option v-for="item in operateList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="操作记录" prop="operatelogos">
                <el-table :data="formData.data.operatelogos">
                  <el-table-column align="center" label="类型" prop="typeId">
                    <template #default="scope">
                      <el-select 
                        class="formInp"
                        v-if="scope.row.editable" 
                        v-model="scope.row.typeId"
                        placeholder="请选择类型"
                      >
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                      <div v-else>{{ scope.row.typeId === 1 ? '故障' : (scope.row.typeId === 2 ? '维护' : '交易') }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="时间" prop="operateTime">
                    <template #default="scope">
                      <el-date-picker
                        v-if="scope.row.editable"
                        v-model="scope.row.operateTime"
                        style="width: 100%;"
                        type="date"
                        placeholder="请选择事故时间"
                        @change="e => scope.row.operateTime = formatDateToYMD(e)"
                      />
                      <div v-else>{{ scope.row.operateTime }}</div>
                    </template>
                  </el-table-column>                  
                  <el-table-column align="center" label="操作人" prop="operateName">
                    <template #default="scope">
                      <el-input 
                        class="formInp"
                        v-if="scope.row.editable" 
                        v-model="scope.row.operateName" 
                        clearable 
                        placeholder="请输入操作人"
                      />
                      <div v-else>{{ scope.row.operateName }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="联系电话" prop="phone">
                    <template #default="scope">
                      <el-input
                        class="formInp"
                        v-if="scope.row.editable" 
                        v-model="scope.row.phone" 
                        clearable
                        :maxlength="11"
                        placeholder="请输入联系电话"
                      />
                      <div v-else>{{ scope.row.phone }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column :width="200" align="center" label="操作">
                    <template #default="scope">
                      <div v-if="scope.row.editable">
                        <el-button link type="info" @click="cancle(scope.$index)">取消</el-button>
                        <el-button link type="primary" @click="save(scope.row, scope.$index)">保存</el-button>
                      </div>
                      <div v-else>
                        <el-button link type="primary" @click="edit(scope.$index)">
                          编辑
                        </el-button>
                        <el-popconfirm
                          class="box-item"
                          title="确定删除？"
                          placement="top-end"
                          @confirm="del(scope.$index)"
                        >
                          <template #reference>
                            <el-button link type="danger">
                              删除
                            </el-button>
                          </template>
                        </el-popconfirm>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button @click="addRow" plain class="addRow">
                  <el-icon class="mr-6"><Plus /></el-icon>  添加
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">运营信息</div>
      </div>
      <div class="content_main">
        <el-form 
          ref="formRef" 
          :inline="true" 
          :model="formData.data" 
          :rules="formRules" 
          class="-mb-15px"
          label-width="auto"
        >
          <el-row :gutter="16">
            <el-col :span="6">
              <el-form-item label="所在位置" prop="address">
                <el-input v-model="formData.data.address" placeholder="请输入所在位置" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="销售人员" prop="salesName">
                  <el-input v-model="formData.data.salesName" placeholder="请输入销售人员" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="售后电话" prop="afterSalePhone">
                  <el-input v-model="formData.data.afterSalePhone" placeholder="请输入售后电话" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="运行项目" prop="runName">
                  <el-input v-model="formData.data.runName" placeholder="请输入运行项目" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属部门" prop="departmentId">
                <el-tree-select
                  class="formInp"
                  v-model="formData.data.departmentId"
                  :data="deptTree"
                  filterable
                  clearable
                  :props="defaultProps"
                  check-strictly
                  default-expand-all
                  placeholder="请选择责任部门"
                  value-key="deptId"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap class="flex-c">
    <el-button class="!w-80px" type="primary" :loading="loading" @click="submitForm">提交</el-button>
    <el-button class="!w-80px" type="warning" @click="closeForm">取消</el-button>
  </ContentWrap>

</template>
<script setup>
  import {ref,reactive} from "vue"
  import { UploadImgs, UploadFile } from "@/components/UploadFile/index.ts"
  import { formRules, runList, operateList, typeList } from './jsonAndRules'
  import { formatDateToYMD } from '@/utils/index'
  import { isPhoneNumber } from '@/utils/index'
  import { defaultProps } from '@/utils/tree'
  import { Plus } from '@element-plus/icons-vue'
  const goBack = inject('goBack')
  const deptTree = inject('deptTree')
  const message = useMessage() // 消息弹窗
  const loading = ref(false)
  const pageStatus = ref(1) // 1新增  2编辑
  const copyData = ref([])
  const formRef = ref(null)
  const formData = reactive({
    data: {
      id: 1,
      devNo: '', // 设备编号
      devName: '', // 设备名称
      devModel: '', // 设备型号
      factoryName: '', // 所属厂家
      devPhotos: [], // 设备图片
      attachment: [], // 附件
      runId: '', // 运行状态
      operateId: '', // 运营状态
      operatelogos: [], // 操作记录
      address: '', // 所在位置
      salesName: '', // 销售人员
      afterSalePhone: '', // 售后电话
      runName: '', // 运行项目
      departmentId: '', // 所属部门
    }
  })
  const init = (type, id) => {
    pageStatus.value = type
  }


  /** 操作记录逻辑处理 - 开始 */
  const addRow = () => {
    let operatelogos = JSON.parse(JSON.stringify(formData.data.operatelogos))
    copyData.value = JSON.parse(JSON.stringify(operatelogos))
    let flag = operatelogos.find(item => item.editable)
    if (flag) {
      ElMessage.warning('请先保存当前数据')
      return
    }
    operatelogos.push({
      typeId: null, 
      operateTime: null, 
      operateName: null, 
      phone: null,
      editable: true,
    })
    formData.data.operatelogos = operatelogos
  }
  const edit = (index) => {
    let operatelogos = JSON.parse(JSON.stringify(formData.data.operatelogos))
    let flag = operatelogos.find(item => item.editable)
    if (flag) {
      ElMessage.warning('请先保存当前数据')
      return
    }
    copyData.value = JSON.parse(JSON.stringify(operatelogos))
    operatelogos[index].editable = true
    formData.data.operatelogos = operatelogos
  }
  const del = (index) => {
    let operatelogos = JSON.parse(JSON.stringify(formData.data.operatelogos))
    operatelogos.splice(index, 1)
    formData.data.operatelogos = operatelogos
  }
  const cancle = () => {
    let operatelogos = JSON.parse(JSON.stringify(copyData.value))
    formData.data.operatelogos = operatelogos
  }
  const save = (row, index) => {
    let operatelogos = JSON.parse(JSON.stringify(formData.data.operatelogos))
    const {typeId, operateTime, operateName, phone} = row
    if (!typeId) {
      message.warning('请选择操作类型')
      return
    }
    if (!operateTime) {
      message.warning('请选择操作时间')
      return
    }
    if (!operateName) {
      message.warning('请输入操作人姓名')
      return
    }
    if (!phone) {
      message.warning('请输入联系电话')
      return
    }
    if (!isPhoneNumber(phone)) {
      message.warning('请输入正确的联系电话')
      return
    }
    operatelogos.forEach(item => item.editable = false)
    formData.data.operatelogos = operatelogos
  }
  /** 操作记录逻辑处理 - 结束 */

  const closeForm = () => {
    // 关闭表单弹窗逻辑
    goBack()
  }
  const submitForm = (type) => {
    const formEl = formRef.value
    if (!formEl) return
    formEl.validate((valid, fields) => {
      if (valid) {

        console.log(formData.data, valid, '走这里来了？？？');
      }else{
        for(let key in fields){
          message.error(fields[key].message)
        }
      }
    })
  }
  defineExpose({ init })
</script>
<style lang="scss" scoped>
.el-form-item{
  width: 100%;
}
.addRow{
  margin-top: 12px;
  width: 100%;
}
</style>
